<template>
		<view>
			<view class="index-tabs">
				<view class='active' v-for="(item,index) in tabList" :key="index">
					<view :class="{texted:currentTab == index }" :data-tab="item.value" @click="switchTab(index)">
						{{item.name}}
					</view>
					<view class="active-xian" v-if="currentTab == index "></view>
				</view>
			</view>			
			<!-- 内容 -->
			<view class="tab-content">
				<view v-if="currentTab==0" >
					<view class="content_List">
							<view class="follow_list">
									<view class="follow_info">
											<image src="/static/image/message/message-follow.png" mode="" class="info-file"></image>
											<view class="follow-name">用户A名称</view>	
									</view>
									<view class="follow-time">2025-01-01</view>
							</view>
							<view class="follow_list">
									<view class="follow_info">
											<image src="/static/image/message/message-follow.png" mode="" class="info-file"></image>
											<view class="follow-name">用户B名称</view>	
									</view>
									<view class="follow-time">2025-01-01</view>
							</view>
							<view class="follow_list">
									<view class="follow_info">
											<image src="/static/image/message/message-follow.png" mode="" class="info-file"></image>
											<view class="follow-name">用户c名称</view>	
									</view>
									<view class="follow-time">2025-01-01</view>
							</view>
							<view class="follow_list">
									<view class="follow_info">
											<image src="/static/image/message/message-follow.png" mode="" class="info-file"></image>
												<view class="follow-name">用户D名称</view>	
									</view>
									<view class="follow-time">2025-01-01</view>
							</view>					
					</view>
					<view class="normaltxt"> 没有更多了~ </view>
				</view>	
				<view v-if="currentTab==1" >
					<view class="content_List">
							<view class="common_list">
									<view class="follow_info">
											<image src="/static/image/message/message-follow.png" mode="" class="info-file"></image>
											<view class="follow-name">
													<view class="name-common">用户a</view>
													<view class="common-content">评论了你：可以可以，真漂亮啊。</view>
													<view class="common-time">3分钟前</view>												
											</view>	
									</view>
									<view class="common-zuopin">
											<image src="/static/image/Index/1.png" mode="" class="common-img"></image>									
									</view>
							</view>							
							<view class="common_list">
									<view class="follow_info">
											<image src="/static/image/message/message-follow.png" mode="" class="info-file"></image>
											<view class="follow-name">
													<view class="name-common">用户a</view>
													<view class="common-content">评论了你：可以可以，真漂亮啊。</view>
													<view class="common-time">12分钟前</view>								
											</view>	
									</view>
									<view class="common-zuopin">
									<div class="video-container" >
										<video :autoplay="false" ref="myVideo" class="videoss"  src="/static/image/Index/tiaowu.mp4"
	                       :show-center-play-btn="false" :controls="false" ></video>
										 <div class=" custom-controlsm">
												<image src="/static/image/find/stop.png" class="control-iconsm"  />
										 </div>		
									</div>
								</view>
							</view>
					</view>
						<view class="normaltxt"> 没有更多了~ </view>
				</view>	
				<view v-if="currentTab==2" >
					<view class="content_List">
					 <view class="common_list">
							<view class="follow_info">
									<image src="/static/image/message/message-follow.png" mode="" class="info-file"></image>
									<view class="follow-name">
											<view class="name-common">用户a</view>
											<view class="common-content">	赞了你的作品  			
										  	<span style="font-size:22rpx;color:#999;margin-left:12rpx;"> 3分钟前</span>											
											</view>									
									</view>	
							</view>
							<view class="common-zuopin">
									<image src="/static/image/Index/1.png" mode="" class="common-img"></image>									
							</view>
					</view>					
					<view class="common_list">
							<view class="follow_info">
									<image src="/static/image/message/message-follow.png" mode="" class="info-file"></image>
									<view class="follow-name">
											<view class="name-common">用户a</view>
											<view class="common-content">	赞了你的作品
												<span style="font-size:22rpx;color:#999;margin-left:12rpx;"> 3分钟前</span>											
											</view>									
									</view>	
							</view>
							<view class="common-zuopin">
							<div class="video-container" >
								<video :autoplay="false" ref="myVideo" class="videoss"  src="/static/image/Index/tiaowu.mp4"
					           :show-center-play-btn="false" :controls="false" ></video>
								 <div class=" custom-controlsm">
										<image src="/static/image/find/stop.png" class="control-iconsm"  />
								 </div>		
							</div>
						</view>
					</view>
					<view class="common_list">
							<view class="follow_info">
									<image src="/static/image/message/message-follow.png" mode="" class="info-file"></image>
									<view class="follow-name">
											<view class="name-common">用户a</view>
											<view class="common-content">	赞了你的作品  			
										  	<span style="font-size:22rpx;color:#999;margin-left:12rpx;"> 3分钟前</span>											
											</view>									
									</view>	
							</view>
							<view class="common-zuopin">
									<image src="/static/image/Index/1.png" mode="" class="common-img"></image>									
							</view>
					</view>	
					</view>
						<view class="normaltxt"> 没有更多了~ </view>
				</view>	
			</view>			
		</view>
</template>

<script>
	export default {
		data() {
			return {
        currentTab: 0,
				tabList: [{
						name: '关注我的',
						value: 0
					},
					{
						name: '评论我的',
						value: 1
					},
					{
						name: '点赞我的',
						value: 2
					},
				
				],
			}
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
			},
		},
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F8F8F8;
	}
	.normaltxt {
		text-align: center;
		font-size: 28rpx;
		color: rgba(153, 153, 153, 1);
		margin: 86rpx 0;
	}
	.index-tabs {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 30rpx;
	}
	.active-xian{
		width:40rpx;
		height:6rpx;
		background: #000;
		margin:0 auto;
	}
	.active {
		font-size: 30rpx;
		color:#999;
	}
	.texted {
		font-size: 30rpx;
		color:#000;
		margin-bottom:8rpx;	
	}
	.content_List{
		background: #fff;
		margin-top:30rpx;
	}
	.follow_list{
		margin:0 30rpx;
		height:120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.follow_info{
		display: flex;
		align-items: center;
	}
	.info-file{
		width:80rpx;
		height:80rpx;
		border-radius: 50%;
	}
	.follow-name{
		margin-left:16rpx;
	}
	.follow-time{
		font-size: 24rpx;
		color:#999;
	}
	.common_list{
		margin:0 30rpx;
		display: flex;
		height: 160rpx;
		align-items: center;
		justify-content: space-between;
	}
	.name-common{
		font-size:32rpx;
		color:#000;
	}
	.common-content{
		font-size:26rpx;
		color:#666;
		margin:6rpx 0;
		width:430rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.common-time{
		font-size:22rpx;
		color:#999;
	}
	.common-zuopin{
		margin-left:8rpx;
	}
	.common-img{
		width:100rpx;
		height:130rpx;
	}
	.videoss{
		width:100rpx;
		height:130rpx;
	}
	.video-container {
		display: flex;
		flex-wrap: wrap;
		position: relative;
		margin-bottom:16rpx;
	}

	.custom-controlsm {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.control-iconsm {
	  width: 44rpx;
	  height: 44rpx;
	  pointer-events: auto; /* 允许图标接收点击事件 */
	  opacity: 1;
	}

</style>